<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title>CPK指数报表</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="./css/layuiAdminTheme.css" />
</head>
<body>
<form class="layui-form" action="" lay-filter="data">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">搜索：</label>
            <input type="text" name="machineNum" id="machineNum" autocomplete="off" class="layui-input" style="width: 14em;" placeholder="机台名称">
        </div>
        <div class="layui-inline">
            <select id="deptName" type="text" name="cpkDept" class="layui-input" style="width: 8em;" lay-filter="cpkDept" onclick="isAdminOfOrder()">
                <option value="">请选择部门...</option>
            </select>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn" lay-submit="" lay-filter="searchBtn">查看报表</button>
        </div>
    </div>
</form>
<div id="cpkChart" style="width: 1600px;height: 650px;display: none">
</div>

<script src="./js/main.js" charset="utf-8"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>-->
<script src="./layui/layui.js" charset="utf-8"></script>
<script src="./js/jQuery.main.js"></script>
<script src="./js/xm-select.js"></script>
<script src="./js/echarts.js" charset="utf-8"></script>
<script>
    //选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });
    layui.use('form', function(){
        var form=layui.form;
        //部门下拉框
        $.ajax({
            url: url + '/sys-dept/listDept',
            method: 'POST',
            async : false,
            contentType: 'application/json',
            success: function(res) {
                //显示前先判断是否为管理员
                $.ajax({
                    url: '/sys-user/getAdmin/'+sessionStorage.getItem('userId'),
                    method: 'GET',
                    async : false,
                    contentType: 'application/json',
                    success: function (res) {
                        if (res.code===200){
                            isAd=1;
                        }
                        else if (res.code===400){
                            isAd=0;
                            thisDept=res.data.dept;
                        }
                    }
                })
                //按照是否为管理员显示下拉框
                if (res.code == 200) {
                    for (var i = 0; i < res.data.length; i++) {
                        if(isAd===1){
                            $("#deptName").append("<option value='" + res.data[i].id + "'>" + res.data[i].dept +"</option>");
                        }else if (isAd===0&&res.data[i].dept===thisDept){
                            $("#deptName").append("<option selected='selected' value='" + res.data[i].id + "'>" + res.data[i].dept +"</option>").attr('disabled','disabled');
                        }
                    }
                    form.render('select');
                }
            }
        })
        //监听提交
        form.on('submit(searchBtn)', function(){
            var machineNum=$('#machineNum').val()
            //获取值
            if(machineNum==""||machineNum==null){
                //未输入机台号则获取所有
                $.ajax({
                    url: url + '/cpk-info/getAllCpkChart',
                    method: 'POST',
                    async : false,
                    contentType: 'application/json',
                    data: JSON.stringify({
                        loginName: sessionStorage.getItem('loginName'),
                        deptId: $('#deptName').val()
                    }),
                    success: function(res) {
                        //错误提示
                        if(res.code==400){
                            layer.msg(res.msg)
                        }
                        //样式恢复
                        $('#cpkChart').attr('style','width: 1600px;height: 650px')
                        //渲染折线图
                        var cpkCharts = echarts.init(document.getElementById('cpkChart'));
                        var option;
                        option = {
                            tooltip: {
                                trigger: 'axis',
                                position: function (pt) {
                                    return [pt[0], '10%'];
                                }
                            },
                            title: {
                                left: 'center',
                                text: $("#deptName").find("option:selected").text()+'所有 CPK 折线图'
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: res.data.numList
                            },
                            yAxis: {
                                type: 'value',
                                boundaryGap: [0, '100%'],
                                markline: 1.33
                            },
                            dataZoom: [
                                {
                                    type: 'inside',
                                    start: 0,
                                    end: 10
                                },
                                {
                                    start: 0,
                                    end: 10
                                }
                            ],
                            series: [
                                {
                                    name: 'CPK 指数',
                                    type: 'line',
                                    symbol: 'circle',//折点圆点
                                    label:{
                                        show:true,
                                        position:"top"//显示在上方
                                    },
                                    sampling: 'lttb',
                                    itemStyle: {
                                        color: 'rgb(255, 70, 131)'
                                    },
                                    markLine: {
                                        silent: true,
                                        lineStyle: {
                                            normal: {
                                                color: '#fe0101'                   // 这儿设置安全基线颜色
                                            }
                                        },
                                        data: [{
                                            yAxis: 1.330
                                        }],
                                        label: {
                                            normal: {
                                                formatter: '1.33标准线'           // 这儿设置安全基线
                                            },
                                            position: "start"
                                        },
                                    },
                                    data: res.data.cpkList
                                }
                            ]
                        };
                        cpkCharts.setOption(option);
                        /* 完成渲染 */
                    }
                })
            }else {
                $.ajax({
                    url: url + '/cpk-info/getCpkChart',
                    method: 'POST',
                    async : false,
                    contentType: 'application/json',
                    data: JSON.stringify({
                        machineNum: machineNum,
                        loginName: sessionStorage.getItem('loginName'),
                        deptId: $('#deptName').val()
                    }),
                    success: function(res) {
                        //错误提示
                        if(res.code==400){
                            layer.msg(res.msg)
                        }
                        //样式恢复
                        $('#cpkChart').attr('style','width: 1600px;height: 650px')
                        //渲染折线图
                        var cpkCharts = echarts.init(document.getElementById('cpkChart'));
                        var option;
                        option = {
                            tooltip: {
                                trigger: 'axis',
                                position: function (pt) {
                                    return [pt[0], '10%'];
                                }
                            },
                            title: {
                                left: 'center',
                                text: machineNum+'机台 CPK 折线图'
                            },

                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: res.data.orderNumList
                            },
                            yAxis: {
                                type: 'value',
                                boundaryGap: [0, '100%'],
                                markline: 1.33
                            },
                            dataZoom: [
                                {
                                    type: 'inside',
                                    start: 0,
                                    end: 10
                                },
                                {
                                    start: 0,
                                    end: 10
                                }
                            ],
                            series: [
                                {
                                    name: 'CPK 指数',
                                    type: 'line',
                                    symbol: 'circle',//折点圆点
                                    label:{
                                        show:true,
                                        position:"top"//显示在上方
                                    },
                                    sampling: 'lttb',
                                    itemStyle: {
                                        color: 'rgb(255, 70, 131)'
                                    },

                                    markLine: {
                                        silent: true,
                                        lineStyle: {
                                            normal: {
                                                color: '#fe0101'                   // 这儿设置安全基线颜色
                                            }
                                        },
                                        data: [{
                                            yAxis: 1.330
                                        }],
                                        label: {
                                            normal: {
                                                formatter: '1.33标准线'           // 这儿设置安全基线
                                            },
                                            position: "start"
                                        },
                                    },
                                    data: res.data.cpkList
                                }
                            ]
                        };
                        cpkCharts.setOption(option);
                        /* 完成渲染 */
                    }
                })
            }
            return false;
        });
    });


</script>
</body>
</html>